<template>
  <div>
    <!--一级 导航 -->
    <router-link to="/find">发现音乐</router-link>
    <span>||</span>
    <router-link to="/my">我的音乐</router-link>
    <!--7、 设置挂载点 -->
    <!--  -->
    <router-view> </router-view>
    <!-- 
    router-link 提供的两个激活类名的区别

   1、 router-link-exact-active:精确匹配  浏览器地址栏url路径，（/find/子页面/）
      和导航a标签中的href属性值完全相同的时候才会给a标签添加此类名

   2、 router-link-active：  模糊匹配（包含其中一个/find）
       url中的hash值 包含了href属性的其中一个，就可以给a标签添加此类

使用场景：
 1、router-link-exact-active:设置二级导航高亮效果  在嵌套的子页面

 2、router-link-active：设置一级导航高亮效果 在跟页面
     -->
  </div>
</template>

<script>
export default {};
</script>

<style>
div {
  text-align: center;
}
.router-link-active {
  color: orange;
}
</style>  